import type { FC } from "react";
import { useDebounceFn } from "ahooks";
import { produce } from "immer";
import contentStyle from "../index.module.scss";
import styles from "./index.module.scss";
// import { useCustomizationStore, usePersonalDetailsStore } from "@/store/createStore";
import { updateCustomization } from "@/service";
import { usePersonalDetailStore } from "@/src/providers/personal-detail-store-provider";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { customization, updateColumnWidth, addCustomization } =
    useCustomizationStore((state) => state);
  const { personalDetails } = usePersonalDetailStore(
    (state) => state,
    (o, n) => {
      return o.personalDetails.id === n.personalDetails.id;
    }
  );
  function change(data) {
    updateColumnWidth(data.layout.colWidthsFromDetails);
  }
  const updateValue = (params) => {
    return updateCustomization({
      ...params,
    });
  };
  const { run } = useDebounceFn(
    (data) => {
      updateValue({
        updates: [
          {
            path: `layout.colWidthsFromDetails.${customization.layout.detailsPosition}.leftWidth`,
            value:
              data.layout.colWidthsFromDetails[
                customization.layout.detailsPosition
              ].leftWidth,
          },
          {
            path: `layout.colWidthsFromDetails.${customization.layout.detailsPosition}.rightWidth`,
            value:
              data.layout.colWidthsFromDetails[
                customization.layout.detailsPosition
              ].rightWidth,
          },
        ],
        id: customization.id,
      });
    },
    {
      wait: 1000,
    }
  );
  if (
    customization.layout.colsFromDetails[
      customization.layout.detailsPosition
    ] !== "one"
  ) {
    return (
      <>
        <h3 className={contentStyle.subtitle}>左右占比</h3>
        <div className={styles.columnWidth}>
          <div
            className={styles.column}
            onClick={async () => {
              if (
                customization.layout.colWidthsFromDetails[
                  customization.layout.detailsPosition
                ].leftWidth >= 80
              )
                return;

              const data = produce(customization, (draft) => {
                draft.layout.colWidthsFromDetails[
                  customization.layout.detailsPosition
                ].leftWidth += 1;
                draft.layout.colWidthsFromDetails[
                  customization.layout.detailsPosition
                ].rightWidth -= 1;
              });
              change(data);

              if (customization.id) {
                run(data);
              } else if (personalDetails.id) {
                addCustomization(personalDetails.id);
              }
            }}
          >
            +
            {
              customization.layout.colWidthsFromDetails[
                customization.layout.detailsPosition
              ].leftWidth
            }
          </div>
          <div
            className={styles.column}
            onClick={() => {
              if (
                customization.layout.colWidthsFromDetails[
                  customization.layout.detailsPosition
                ].rightWidth >= 80
              )
                return;
              const data = produce(customization, (draft) => {
                draft.layout.colWidthsFromDetails[
                  customization.layout.detailsPosition
                ].leftWidth -= 1;
                draft.layout.colWidthsFromDetails[
                  customization.layout.detailsPosition
                ].rightWidth += 1;
              });
              change(data);

              if (customization.id) {
                run(data);
              } else if (personalDetails.id) {
                addCustomization(personalDetails.id);
              }
            }}
          >
            +
            {
              customization.layout.colWidthsFromDetails[
                customization.layout.detailsPosition
              ].rightWidth
            }
          </div>
        </div>
      </>
    );
  }
  return null;
};

export default Index;
